<template>
  <div class="user-edit">
    <a-card title="编辑用户">
      <a-form
        :model="formData"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item label="用户名" required>
          <a-input v-model:value="formData.username" />
        </a-form-item>
        
        <a-form-item label="邮箱">
          <a-input v-model:value="formData.email" type="email" />
        </a-form-item>
        
        <a-form-item label="姓">
          <a-input v-model:value="formData.first_name" />
        </a-form-item>
        
        <a-form-item label="名">
          <a-input v-model:value="formData.last_name" />
        </a-form-item>
        
        <a-divider>学生信息</a-divider>
        
        <a-form-item label="学号">
          <a-input v-model:value="formData.student_id" />
        </a-form-item>
        
        <a-form-item label="性别">
          <a-select v-model:value="formData.gender" placeholder="请选择">
            <a-select-option value="男">男</a-select-option>
            <a-select-option value="女">女</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="专业">
          <a-input v-model:value="formData.major" />
        </a-form-item>
        
        <a-form-item label="班级">
          <a-input v-model:value="formData.class_name" />
        </a-form-item>
        
        <a-divider>员工信息</a-divider>
        
        <a-form-item label="手机号">
          <a-input v-model:value="formData.phone" />
        </a-form-item>
        
        <a-form-item label="部门">
          <a-input v-model:value="formData.department" />
        </a-form-item>
        
        <a-form-item label="职位">
          <a-input v-model:value="formData.position" />
        </a-form-item>
        
        <a-form-item label="工号">
          <a-input v-model:value="formData.employee_id" />
        </a-form-item>
        
        <a-form-item label="入职日期">
          <a-date-picker v-model:value="formData.hire_date" style="width: 100%" />
        </a-form-item>
        
        <a-form-item label="备注">
          <a-textarea v-model:value="formData.remarks" :rows="4" />
        </a-form-item>
        
        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-space>
            <a-button type="primary" @click="handleSubmit">保存</a-button>
            <a-button @click="$router.back()">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { userAPI } from '@/api/user'
import type { UserDetail } from '@/api/user'
import dayjs from 'dayjs'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const userId = Number(route.params.id)

const formData = ref<{
  username: string
  email: string
  first_name: string
  last_name: string
  student_id: string
  gender: string
  major: string
  class_name: string
  phone: string
  department: string
  position: string
  employee_id: string
  hire_date: any
  remarks: string
}>({
  username: '',
  email: '',
  first_name: '',
  last_name: '',
  student_id: '',
  gender: '',
  major: '',
  class_name: '',
  phone: '',
  department: '',
  position: '',
  employee_id: '',
  hire_date: null,
  remarks: ''
})

// 加载用户数据
const loadUserData = async () => {
  if (!userId) {
    message.error('用户ID无效')
    router.back()
    return
  }
  
  loading.value = true
  try {
    const res = await userAPI.getUserDetail(userId)
    const user = res.data
    
    // 填充表单数据
    formData.value = {
      username: user.username || '',
      email: user.email || '',
      first_name: user.first_name || '',
      last_name: user.last_name || '',
      student_id: user.profile?.student_id || '',
      gender: user.profile?.gender || '',
      major: user.profile?.major || '',
      class_name: user.profile?.class_name || '',
      phone: user.profile?.phone || '',
      department: user.profile?.department || '',
      position: user.profile?.position || '',
      employee_id: user.profile?.employee_id || '',
      hire_date: user.profile?.hire_date ? dayjs(user.profile.hire_date) : null,
      remarks: user.profile?.remarks || ''
    }
  } catch (error: any) {
    message.error('加载用户数据失败: ' + (error.response?.data?.message || error.message))
    router.back()
  } finally {
    loading.value = false
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formData.value.username) {
    message.error('用户名不能为空')
    return
  }
  
  loading.value = true
  try {
    const submitData: Partial<UserDetail> = {
      username: formData.value.username,
      email: formData.value.email,
      first_name: formData.value.first_name,
      last_name: formData.value.last_name,
      profile: {
        student_id: formData.value.student_id,
        gender: formData.value.gender as '男' | '女' | undefined,
        major: formData.value.major,
        class_name: formData.value.class_name,
        phone: formData.value.phone,
        department: formData.value.department,
        position: formData.value.position,
        employee_id: formData.value.employee_id,
        hire_date: formData.value.hire_date ? dayjs(formData.value.hire_date).format('YYYY-MM-DD') : undefined,
        remarks: formData.value.remarks
      } as any
    }
    
    await userAPI.patchUser(userId, submitData)
    message.success('保存成功')
    router.back()
  } catch (error: any) {
    message.error('保存失败: ' + (error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadUserData()
})
</script>

<style scoped>
</style>
